<template>
  <i-page :loading="api.tableState.loading" :shadow="true" :background="true">
    <template #header>
      <a-page-header title="公司列表">
        <div class="d-flex justify-space-between pb-4">
          <a-typography-paragraph>
            管理员管理、查看并修改公司配置项，可修改项包括：公司名称、公司LOGO图片、公司LOGO名称，小程序信息。商户信息，公众号信息
          </a-typography-paragraph>

          <img
              class="image"
              :src="Img"
              alt="content"
              style="width: 155px;margin-top: -40px;margin-right: 80px"
          />
        </div>
      </a-page-header>
    </template>

    <div class=" d-flex flex-column">
      <div class="pa-4 d-flex align-center justify-space-between">
        <a-space>
          <a-button plain type="primary" @click="api.onCreate()">创建</a-button>
          <a-button plain icon="" @click="api.refreshTable()">刷新</a-button>
        </a-space>

      </div>

      <i-sheet radius>
        <a-table
            :data-source="api.tableState.dataSource"
            :loading="api.tableState.loading"
            :pagination="api.tableState.pagination"
            @change="(e:any)=>api.onTableChange(e)"
        >
          <a-table-column key="name" title="公司名称" data-index="name"/>
          <a-table-column key="name" title="创建时间" data-index="createTime"/>
          <a-table-column key="action" title="操作" :width="200" align="center">
            <template #default="{ record }">
              <a-space class="fill-width">
                <a-button size="small" type="link" text @click="api.onDetail(record.id)">详情</a-button>
                <a-button size="small" text type="link" @click="api.onEdit(record.id)">编辑</a-button>
                <a-button size="small" text type="link" danger @click="api.onDelete(record.id)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </a-table>
      </i-sheet>

    </div>

    <Create :api="api"/>
    <Edit :api="api"/>
    <Detail :api="api"/>
  </i-page>
</template>

<script setup lang="ts">
import {CompanyApi} from "~/api/system/company.api";
import {onMounted} from "vue";
import Create from "~/views/system/company/Create.vue";
import Edit from "~/views/system/company/Edit.vue";
import Detail from "~/views/system/company/Detail.vue";
import Img from "~/assets/RzwpdLnhmvDJToTdfDPe.png";

const api = new CompanyApi();

onMounted(() => {
  api.onListPage();
});
</script>

<style scoped lang="scss">

</style>
